<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
    <script src="./js/api.js"></script>
  </head>
  <body>
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
    <input type="button" name="" id="" value="登录" />
    <script>
      // 用户点击登录的时候发起 登录请求，请求成功以后 跳转到 首页
      let isUsername = false;
      let isPassword = false;

      let ipts = document.querySelectorAll("input");

      ipts[0].onblur = function () {
        let reg = /^[a-z]\w{5,17}$/i;
        if (reg.test(this.value)) {
          isUsername = true;
        } else {
          isUsername = false;
        }
      };

      ipts[1].onblur = function () {
        let reg = /^\S{6,16}$/;
        if (reg.test(this.value)) {
          isPassword = true;
        } else {
          isPassword = false;
        }
      };

      // 点击登录的发起 登录请求
      ipts[2].onclick = function () {
        if (isUsername && isPassword) {
          // 发起登录请求
          let username = ipts[0].value;
          let password = ipts[1].value;
          axios
            .get(loginAPI, {
              params: { username, password },
            })
            .then((res) => {
              let { data } = res;
              console.log(data);
              localStorage.setItem("uid", data.data.id);
              localStorage.setItem("username", data.data.username);
              localStorage.setItem("token", data.data.token);
              alert(data.msg);
              if (data.code == 1) {
                // alert("index.html");
                location.href = "index.html";
              }
            });
        }
      };
    </script>
  </body>
</html>
